<template>
  <div class="beijingorder">
    <el-table
      :data="order"
      style="width: 100%;background-image: url(../../assets/1.jpg);"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        style="background-color: black"
        label="订单号"
        prop="orderFormId"
      />
  
      <!-- <el-table-column label="订单数量" prop="totalNum" /> -->
      <!-- <el-table-column label="订单总价格" prop="totalMoney" /> -->
      <el-table-column label="购买时间" prop="orderDate" />
      <el-table-column label="订单状态" prop="state" />
      <el-table-column label="购买数量" prop="totalNum" />
      <el-table-column>
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="填写订单号并回车"
            @keydown.enter="findorder"
          />
        </template>
        <template #default="scope">
          
          <el-button
            size="small"
            class="dingdanxiangqing"
            @click="orderdetailopen(scope.$index, scope.row)"
            style="background-color: rgba(11, 95, 136, 0.751); color: white"
            >订单详情</el-button
          >
          <el-button
            size="small"
            class="dingdanxiangqing"
            @click="finishorder(scope.$index, scope.row)"
            style="background-color: rgba(11, 95, 136, 0.751); color: white"
            >确认收货</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="returnOfBook(scope.$index, scope.row)"
            >退货</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Orderdetail ref="orderdetail"></Orderdetail>
    <!-- <buy-dialog ref="buydialog"></buy-dialog> -->
  </div>
</template>
  <script>
import Orderdetail from "../qiantai/Orderdetail.vue";
import BuyDialog from "./BuyDialog.vue";
//return是退货的意思
export default {
  name: "Order",
  components: { Orderdetail },

  data() {
    return {
      order: [],
      search: "",
      // oldfallback: "",
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex, row);
      if (row.state == "未完成") {
        return "";
      } else if (row.state == "完成"||row.state=='完成（已评价）') {
        return "warning-row";
      }
      return "";
    },

    loadorders() {
      var data = new FormData();
      data.append("userid", sessionStorage.getItem("userId"));
      this.$axios.post("/getuserorders", data).then((resp) => {
        if (resp.status == 200) {
          this.order = resp.data;
          console.log(this.order[0]);
        }
      });
    },
    orderdetailopen(index, row) {
      console.log(row);
      this.$refs.orderdetail.order = row;
      this.$refs.orderdetail.dialogVisible = true;
      var data = new FormData();
      data.append("bookId", row.bookId);
      this.$axios.post("/getbookname", data).then((resp) => {
        console.log(resp.data);
        // this.bookname=resp.data
        this.$refs.orderdetail.bookname = resp.data;
      });
      this.$axios.post("/getbookcover", data).then((resp) => {
        console.log(resp.data);
        // this.bookname=resp.data
        this.$refs.orderdetail.bookcover = resp.data;
      });
    },
    getbookname() {},
    findorder() {
      console.log(this.search);
      if (this.search == "") {
        this.loadorders();
      } else {
        var data = new FormData();
        data.append("search", this.search);
        this.$axios.post("/findorders", data).then((resp) => {
          if (resp.status == 200) {
            this.order = resp.data;
            console.log(resp.data);
          }
        });
      }
    },
    finishorder(index,row){
      var data=new FormData()
      data.append('finishorderId',row.orderFormId)
      this.$axios.post('/finishorder',data).then(resp=>{
        this.loadorders()
       
      })

    },
    // fallback() {
    //   console.log("执行fallback方法");

    //   this.$emit("buy");
    //   // this.$cookies.set('fallback',"")
    //   // this.$refs.buydialog.buy()
    // },
    // fallbackstart() {
    //   //   console.log(this.$cookies.get('fallback'));
    //   //   if (this.$cookies.get('fallback') == 'succees') {

    //   //      this.fallback()

    //   // }

    //   this.$axios.get("/fallbacktofront").then((resp) => {
    //     console.log("typeof resp.data:"+typeof resp.data);
    //     if (this.oldfallback == "") {
    //       if (resp.data != "") {
    //         this.oldfallback = resp.data;
    //         this.fallback();
    //         console.log("第一次买");
    //       }
    //     } else if (this.oldfallback != "") {
    //       if (this.oldfallback != resp.data) {
    //         this.oldfallback = resp.data;
    //         this.fallback();
    //         console.log("不止第一次买");
    //       }
    //     }
    //   });
    // },
    returnOfBook(index, row) {
      console.log(row.orderFormId);
      var data = new FormData();
      data.append("orderFormId", row.orderFormId);
      this.$axios.post("/returnofbook", data).then((resp) => {
        if (resp.status == 200) {
          this.returnsucess();
          this.loadorders();
        }
      });
    },
    returnsucess() {
      this.$message({
        message: "退货成功",
        type: "success",
      });
    },
  },
  mounted: function () {
    this.loadorders();
    // this.fallbackstart();
  },
};
</script>
<style>
/* .el-table .warning-row {
    background: rgba(255, 0, 0, 0.7);
  } */

.el-table .warning-row {
  background: #124874;
  color: white;
}
.el-table .warning-row:hover {
  /* background: #a1bf39; */
  color: black;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #a1bf39;
}

.el-table th.el-table__cell {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #0e0808;
}
.dingdanxiangqing {
  --el-button-size: 24px;
  height: var(--el-button-size);
  padding: 5px 11px;
  font-size: 12px;
  color: white;
  background-color: rgba(11, 95, 136, 0.751);
}
.beijingorder{
  background-image: url("../../assets/5.jpg");
}
</style>